<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="main" style="width: 100%;height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
// 1. 导入 echarts
import echarts from 'echarts'
// import _ from 'lodash'

export default {
  data() {
    return {
      // 需要合并的数据
      options: {
        title: {
          text: '用户来源',
          textStyle: { // 标题内容的样式
            color: 'whitesmoke'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: 'transparent'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          axisLabel: {
            textStyle: {
              color: 'whitesmoke'
            }
          },
          boundaryGap: false,
          data: [' 2020-3-27', '2020-4-12', '2020-4-29', '2020-5-12', '2020-5-19', '2020-6-12']
        }],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: 'whitesmoke'
              }
            }
          }
        ],
        legend: {
          data: ['华东', '华南', '华北', '西部', '其他'],
          textStyle: {
            color: 'whitesmoke'
          }
        },
        series: [
          { name: '华东', type: 'line', stack: '总量', areaStyle: { normal: {} }, data: [2999, 3111, 4100, 3565, 3528, 6000] },
          { name: '华南', type: 'line', stack: '总量', areaStyle: { normal: {} }, data: [5090, 2500, 3400, 6000, 6400, 7800] },
          { name: '华北', type: 'line', stack: '总量', areaStyle: { normal: {} }, data: [6888, 4000, 8010, 12321, 13928, 12984] },
          { name: '西部', type: 'line', stack: '总量', areaStyle: { normal: {} }, data: [9991, 4130, 7777, 12903, 13098, 14028] },
          { name: '其他', type: 'line', stack: '总量', areaStyle: { normal: {} }, data: [15212, 5800, 10241, 14821, 15982, 14091] }

        ]
      }
    }
  },
  created() {},
  // 此时，页面上的元素，已经被渲染完毕了！
  async mounted() {
    // 3. 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))

    // const { data: res } = await this.$http.get('reports/type/1')
    // if (res.meta.status !== 200) {
    //   return this.$message.error('获取折线图数据失败！')
    // }

    // 4. 准备数据和配置项
    // const result = _.merge(res.data, this.options)
    // console.log(result)

    // 5. 展示数据
    myChart.setOption(this.options)
  },
  methods: {}
}
</script>

<style lang="less" scoped>
</style>
